<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Modal - Inline</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>
  <body>
    <ion-app>
      <div class="ion-page">
        <ion-header>
          <ion-toolbar>
            <ion-title>Modal - Inline</ion-title>
          </ion-toolbar>
        </ion-header>

        <ion-content class="ion-padding">
          <div id="modal-container">
            <button id="open-inline-modal" onclick="openModal(event)">Open Modal</button>
            <ion-modal swipe-to-close="true">
              <ion-header>
                <ion-toolbar>
                  <ion-title> Modal </ion-title>
                </ion-toolbar>
              </ion-header>
              <ion-content class="ion-padding">
                <p>This is my inline modal content!</p>
                <button id="open-child-modal" onclick="openChildModal(event)">Open Child Modal</button>
                <button id="remove-modal-container" onclick="removeModalContainer(event)">
                  Remove Modal Container
                </button>

                <ion-modal id="child-modal" swipe-to-close="true">
                  <ion-header>
                    <ion-toolbar>
                      <ion-title>Child Modal</ion-title>
                    </ion-toolbar>
                  </ion-header>
                  <ion-content class="ion-padding">
                    <p>This is the child modal content!</p>
                    <p>When the parent modal is dismissed, this child modal should also be dismissed automatically.</p>
                    <button id="dismiss-parent" onclick="dismissParent(event)">Dismiss Parent Modal</button>
                    <button id="dismiss-child" onclick="dismissChild(event)">Dismiss Child Modal</button>
                    <button id="child-remove-modal-container" onclick="removeModalContainer(event)">
                      Remove Modal Container
                    </button>
                  </ion-content>
                </ion-modal>
              </ion-content>
            </ion-modal>
          </div>
        </ion-content>
      </div>
    </ion-app>

    <script>
      const modal = document.querySelector('ion-modal');
      const childModal = document.querySelector('#child-modal');

      modal.presentingElement = document.querySelector('.ion-page');
      childModal.presentingElement = modal;

      const openModal = () => {
        modal.isOpen = true;
      };

      const openChildModal = () => {
        childModal.isOpen = true;
      };

      const dismissParent = () => {
        modal.isOpen = false;
      };

      const dismissChild = () => {
        childModal.isOpen = false;
      };

      const removeModalContainer = () => {
        const container = document.querySelector('#modal-container');
        if (container) {
          container.remove();
          console.log('Modal container removed from DOM');
        }
      };

      modal.addEventListener('didDismiss', () => {
        modal.isOpen = false;
      });

      childModal.addEventListener('didDismiss', () => {
        childModal.isOpen = false;
      });

      // Add event listeners to demonstrate the new functionality
      modal.addEventListener('ionModalDidDismiss', (event) => {
        console.log('Parent modal dismissed with role:', event.detail.role);
      });

      childModal.addEventListener('ionModalDidDismiss', (event) => {
        console.log('Child modal dismissed with role:', event.detail.role);
      });
    </script>
  </body>
</html>
